<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../../../webjars/static/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../../../webjars/static/plugins/bootstrap/css/font-awesome.min.css">

<link rel="stylesheet" href="../../../webjars/static/plugins/toastr/toastr.min.css">
<link rel="stylesheet" href="../../../webjars/static/plugins/layui/css/layui.css">


<script src="../../../webjars/static/plugins/jquery/jquery.min.js"></script>
<script src="../../../webjars/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../webjars/static/plugins/vue/vue.min.js"></script>

<script src="../../../webjars/static/plugins/toastr/toastr.min.js" type="text/javascript"
		charset="utf-8"></script>
<script src="../../../webjars/static/plugins/layui/layui.js"></script>

<script src="../../../webjars/static/js/common.js"></script>

<head>
	<title>信息填写</title>
	<style>
		.mybottons{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
		}
		.mybutton{
			flex-basis: 50%;
			justify-content: space-around;
		}
		.mixedDisplay{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			align-items: center;
			height: auto;
			overflow: hidden;
			height: 20rem;

		}

		.itemOne{
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
			height: 10rem;
			align-items: center;
		}
		.itemTwo{
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
			align-items: center;
		}

		/*.itemOne{*/
		/*	flex: 2 1 20%;*/
		/*}*/
		/*.itemFile{*/
		/*	flex: 1 2 10%;*/
		/*}*/
		/*.itemBtn{*/
		/*	flex: 1 1 10%;*/
		/*}*/
		@media screen and (max-width: 500px) and (min-width: 300px) {
			/*input[type="file"]{*/
			/*	font-size: 10px;*/
			/*}*/
			.mixedDisplay{
				font-size: 9px !important;
				height: 10rem;

			}
			.itemOne{
				height: 5rem;
			}
		}

	</style>
</head>
<body style="margin: 10%;text-align:center;">
<div class="layui-card lc-admin">

		<div class="layui-card-body lc-body-admin">
				
		<div id="myapp" v-cloak>
		    <div class="panel panel-default">
		        <div class="panel-heading"><i class="fa fa-pencil-square-o"></i>{{category.name}} 信息填写</div>
		        <form class="form-horizontal" style="margin: 5%;">
					<!--<div class="form-group">-->
						<!--<div class="col-sm-2 control-label">分类id</div>-->
						<!--<div class="col-sm-10">-->
							<input type="hidden" class="form-control" id="categoryId" v-model="baseInfo.categoryId" placeholder="分类id"/>
						<!--</div>-->
					<!--</div>-->
							<template v-if="allAttributes != null && allAttributes.length > 0">
								<template v-for="attribute,attributeIndex in allAttributes">
									<div class="form-group">

										<div class="col-sm-2 control-label">
											<span style="color: red;" v-if="attribute.isMust==1">*</span>
											<span  v-text="attribute.name"></span>
										</div>
										<div class="col-sm-10">
											<textarea v-if="attribute.type==3" class="form-control" v-model="attribute.defaultValue"  :placeholder="attribute.help"></textarea>
											<div v-else-if="attribute.type==5" class="mixedDisplay">
												<div class="itemOne"  v-if="attribute.defaultValue">
													<img  :src="attribute.defaultValue" style="height: 5rem;"  @click="openFileUrl(attribute.defaultValue)" >
												</div>
												<div class="itemTwo">
													<div >
														<input type="file"  :id="'attribute'+attributeIndex" />
													</div>
													<div >
														<input type="button" class="btn btn-warning"  @click="simpleUploadMyFile(attributeIndex)" value="上传"/>
													</div>
												</div>

											</div>
											<div  v-else-if="attribute.type==6"  class="mixedDisplay">
												<div class="itemOne"  v-if="attribute.defaultValue">
													<video :src="attribute.defaultValue"   style="height: 5rem;"  @click="openFileUrl(attribute.defaultValue)" ></video>
												</div>
												<div class="itemTwo">
													<div >
														<input type="file"  :id="'attribute'+attributeIndex" />
													</div>
													<div >
														<input type="button" class="btn btn-warning"  @click="simpleUploadMyFile(attributeIndex)" value="上传"/>
													</div>
												</div>

											</div>

											<input v-else type="text" :class="[{ 'date1': attribute.type==2 }, 'form-control']" v-model="attribute.defaultValue"  :placeholder="attribute.help"/>
										</div>
									</div>
								</template>
							</template>
							 <div class="form-group">
		                        <div class="col-sm-2 control-label">备注信息</div>
		                        <div class="col-sm-8">
									<textarea class="form-control" v-model="baseInfo.remark" placeholder="备注信息"></textarea>
		                        </div>
		                    </div>
					<div class="form-group mybottons">
						<div class="mybutton">
							<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
						</div>
						<div class="mybutton">
							&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="重填"/>
						</div>

					</div>
		        </form>
		    </div>
		</div>
	</div>
</div>
	
<script>
	var extUrl="../../../"
	let categoryId = getParams("categoryId");

	$(function () {
		vm.getAttributes(categoryId);
	})

	var vm = new Vue({
		el: '#myapp',
		data: {
			showList: true,
			title: "请填写学生信息",
			params: {
				name: null,
				remark: null,
				attributeId: null,
				value: null
			},
			baseInfo: {
				attributes: []
			},
			attributes: [],
			category:{
				name:null
			}
		},
		created:function(e){

		},
		computed: {
			allAttributes: function () {
				let allAttributes = [];
				if (com.isNull(this.baseInfo.attributes)) {
					return this.attributes;
				}
				this.attributes.forEach(item => {
					let attribute = this.baseInfo.attributes.find(attr => item.id == attr.id);
					if (com.isNull(attribute)) {
						attribute = item;
					}
					allAttributes.push(attribute);
				})
				return allAttributes;
			}
		},
		methods: {
			saveOrUpdate: function (event) {

				let msg = vm.validateAttributes();
				if (!com.isNull(msg)) {
					warning(msg);
					return;
				}
				var url = vm.baseInfo.id == null ? "anon/productionqr/save" : "anon/productionqr/update";
				vm.baseInfo.attributes = vm.allAttributes;
				vm.baseInfo.categoryId=categoryId
				//请求参数
				var param = JSON.stringify(vm.baseInfo);

				com.AjaxPost(extUrl+ url, param, "json", function (r) {
					if (r.success) {
						toast('操作成功');
						vm.reload();
					} else {
						warning(r.msg);
					}
				});
			},
			validateAttributes: function (event) {
				let msg = [];
				let requiredMsg = "{ATTR}，必填！";
				let error = null;
				for (let index in vm.allAttributes) {
					error = null;
					let item = vm.allAttributes[index];
					//日期用的layui，不能呢给使用vue赋值，此处要用jQuery来取值
					if (item.type == 2) {
						item.defaultValue = $('.date1').val();
					}
					if (item.isMust != 1) {
						continue;
					}
					// 校验是否必填
					if (com.isNull(item.defaultValue)) {
						error = requiredMsg.replace("{ATTR}", item.name);
						msg.push(error);
					}
					// 校验是否是数字
					if (item.type == 1) {
						if (com.isNull(item.defaultValue) || isNaN(item.defaultValue)) {
							error = item.help+",数字";
							msg.push(error);
						}
						// 是否日期
					} else if (item.type == 2) {
						item.defaultValue = $('.date1').val();
						let r = /^\d{4}\-\d{2}\-\d{2}$/;
						let data = item.defaultValue;
						if (!r.test(data)) {
							error = item.help+",日期";
							msg.push(error);
						}
					}
				}
				error = "";
				for (let index in msg) {
					let ind = parseInt(index) + 1;
					error += ind + "." + msg[index] + "<br>";//转义字符不生效
				}
				return error;
			},
			getInfo: function (id) {
				var url = extUrl+"anon/productionqr/info/" + id;
				com.AjaxGet(url, null, "json", function (r) {
					vm.baseInfo = r.entity;
				}, null, false)
			},

			getAttributes: function (categoryId) {
				if (categoryId == null) {
					toast("访问地址缺少 categoryId 参数！");
					return
				}
				var url = extUrl+"anon/productionqr/attributes";
				com.AjaxGet(url, {categoryId: categoryId}, "json", function (r) {
					vm.attributes = r.data.attributes;
					vm.category = r.data.category;
				}, null, false)
			},
			reload: function (event) {
				vm.getAttributes(categoryId);
				vm.baseInfo= {
					attributes: []
				}
				// 清空文件缓存
				$("input[type=file]").val("");
			},
			simpleUploadMyFile: function (attributeIndex) {
				com.simpleUploadMyFile(attributeIndex,vm,extUrl+"anon/productionqr/file/open/"+vm.category.code)
			},
			openFileUrl: function (fileUrl) {
				window.open(fileUrl);
			},
		}
	});

</script>

</body>
</html>